<script setup>
import Navbar from './components/navbar.vue'
import Menu from './components/menu.vue'
import mitt from '@/mitt'
import { useThemeVars } from 'naive-ui'
const themeVars = useThemeVars()

const themeMode = ref('light')
mitt.on('changeTheme', (type) => {
  themeMode.value = type
})
const collapsed = ref(false)
</script>

<template>
  <n-layout class="h-full w-full flex flex-col">
    <n-layout-header bordered> <Navbar /></n-layout-header>
    <n-layout has-sider class="flex-1">
      <n-layout-sider
        class="h-full"
        bordered
        collapse-mode="width"
        :collapsed-width="64"
        :width="240"
        :collapsed="collapsed"
        show-trigger
        @collapse="collapsed = true"
        @expand="collapsed = false"
      >
        <Menu :collapsed="collapsed"></Menu>
      </n-layout-sider>
      <n-layout
        :style="{
          backgroundColor: themeMode == 'light' ? themeVars.tabColor : themeVars.bodyColor
        }"
      >
        <router-view></router-view>
      </n-layout>
    </n-layout>
  </n-layout>
</template>

<style></style>
